<template>
	<vi-drawer ref="fieldsMenu" position="absolute" width="75%">
		<view class="vi_fieldsMenu">
			<view class="vi_fieldsMenu_toolbar">
				<vi-searchbar buttonStyle="active" :initSearch="false" :value="keyword" :text="text" @search="onSearch"></vi-searchbar>
			</view>
			<scroll-view scroll-y class="vi_fieldsMenu_scroll" @touchmove.stop>
				<view class="vi_fieldRow" :class="{'vi_fieldsMenu_active':currAdd==index}" v-for="(item, index) in showList" :key="index" @click="onSubmit(item, index)">
					<view class="vi_textcut">{{item.name}}</view>
					<view class="vi_fieldFlagbox">
						<vi-style-controller
							:type="item.type"
							:color="item.color||''"
							:backgroundColor="item.backgroundColor||''"
							:plain="!!item.plain"
							:radius="item.radius||'0.75em'"
							:borderWidth="item.borderWidth||''"
							active>
							<text class="vi_fieldFlag">{{item.dataTypeName}}</text>
						</vi-style-controller>
					</view>
				</view>
			</scroll-view>
		</view>
	</vi-drawer>
</template>

<script>
	// 数据集：fieldOptions。格式：
	// [
	// 	{name:"字段名",value:"插入值", type:"主题色", dataTypeName:"字段类型"},
	// ]
	export default {
		name:"viFormulaEditorFieldsMenu",
		props: {
			//所有附件组件数据的集合
			dataSet:{},
			text:{
				type:[Object,null],
				default:()=>({})
			},
		},
		data(){
			return {
				dataList:null,
				showList:[],
				keyword:"",
				currAdd:-1,		//点击添加的项，下标
				addTimer:null,	//添加项显示状态延时器
			}
		},
		computed:{
			
		},
		methods:{
			open(){
				this.$refs.fieldsMenu.open()
			},
			close(){
				this.$refs.fieldsMenu.close()
			},
			//初始化数据
			initData(){
				//fieldOptions为当前组件使用的数据集
				this.dataList = (this.dataSet && this.dataSet.fieldOptions) ||[];
				this.showList = this.dataList;
			},
			//执行过滤
			onSearch(e){
				this.keyword = e;
				this.showList = this.dataList.filter((item)=>{
					return item.name.includes(e)
				});
			},
			//提交
			onSubmit(item, index){
				//处理点击添加时变色
				if(this.addTimer){
					clearTimeout(this.addTimer)
				}
				this.currAdd = index;
				this.addTimer = setTimeout(()=>{
					this.currAdd = -1;
					this.addTimer = null;
				}, 400)
				//提交
				this.$emit("event", "sysInsert", {
					mode: "object",
					value: item.value,
					showValue: item.name,
					color: item.color,
					type: item.type,
					plain: true,
					radius: "0.25em",
					borderWidth: 1,
				})
			}
		},
		watch:{
			//fieldOptions为当前组件使用的数据集
			"dataSet.fieldOptions":{
				immediate:true,
				handler(newVal){
					this.initData()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.vi_fieldsMenu{
	width: 100%;
	height: 100%;
	padding: 0.25em 0.5em;
	box-sizing: border-box;
	.vi_fieldsMenu_toolbar{
		height: 2em;
		margin-bottom: 0.5em;
	}
	.vi_fieldsMenu_scroll{
		height: calc(100% - 2.5em);
	}
	.vi_fieldRow{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5em 0.5em;
		&:nth-child(even){
			background-color: #f8f8f8;
		}
	}
	.vi_fieldFlagbox{
		flex-shrink: 0;
		font-size: 85%;
	}
	.vi_fieldFlag{
		padding: 0.1em 0.5em;
	}
	.vi_fieldsMenu_active{
		color: #c00;
		background-color: #fff5f5 !important;
	}
}
.vi_textcut{
	overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
</style>